<template>
  <div>
    <el-drawer :visible.sync="drawer" :with-header="false" :modal="false">
      <div class="drawer_container">

        <!-- <div class="header_type">
                    <div class="header_icon">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane name="first">
                                <span slot="label">
                                    <el-badge :value="2" class="item">
                                        <i class="iconfont gaojing iconStyle"></i>
                                    </el-badge>
                                </span>
                                <div class="header_status">
                                    <div class="status_chose">
                                        <i class="iconfont tongzhi"></i>
                                        <el-dropdown>
                                            <span class="el-dropdown-link">
                                                全部通知<i class="el-icon-arrow-down el-icon--right"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item icon="iconfont tongzhi">全部通知</el-dropdown-item>
                                                <el-dropdown-item icon="iconfont tongzhi">未读通知</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                    <i class="iconfont gengduo"></i>
                                </div>
                                <div class="main">系统消息</div>
                            </el-tab-pane>
                            <el-tab-pane name="second">
                                <span slot="label">
                                    <el-badge :value="4" class="item">
                                        <i class="iconfont gaojing iconStyle"></i>
                                    </el-badge>
                                </span>
                                <div class="header_status">
                                    <div class="status_chose">
                                        <i class="iconfont tongzhi"></i>
                                        <el-dropdown>
                                            <span class="el-dropdown-link">
                                                全部通知<i class="el-icon-arrow-down el-icon--right"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item icon="el-icon-plus">全部通知</el-dropdown-item>
                                                <el-dropdown-item icon="el-icon-circle-plus">未读通知</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                    <i class="iconfont gengduo"></i>
                                </div>
                                <div class="main">告警消息</div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <i class="iconfont cha"></i>
                </div> -->

        <div class="header_status">
          <div class="status_chose">
            <!-- <i class="iconfont xiaoxizhongxin"></i> -->
            <el-dropdown>
              <span class="el-dropdown-link">
                 <i class="iconfont tongzhi" style="font-size:16px;margin-right: 6px;"></i>
                全部通知
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="iconfont tongzhi">全部通知</el-dropdown-item>
                <el-dropdown-item ><svg-icon icon-file-name="weiduxiaoxi" style="font-size:18px;margin-right: 5px;"/>未读通知</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div>
            <i class="iconfont gengduo"></i>
            <i class="iconfont cha" style="font-weight: 1000;" @click="close"></i>
          </div>

        </div>

        <div class="main">
          用户名：lc退出登录
        </div>

      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      drawer: false,
      activeName: "first",
    };
  },
  methods: {
    handleClick(e) {
      // console.log(e, "eee");
    },
    close(){
        this.drawer = false;
    }
  },
};
</script>

<style scoped lang="less">
.drawer_container {
  width: 100%;
  height: 100%;
}

// zhiwen
.header_type {
  width: 100%;
  height: 7vh;
  background: @primaryBgcolor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  // margin-left: 15px;

  .header_icon {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
  }

  .iconStyle {
    font-size: 30px;
    cursor: pointer;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xitongfuwu {
    color: #7367f0;
    // border-bottom: 2px solid #7367f0;
  }

  .gaojing {
    color: #9e9e9e;

    &:hover {
      color: #7367f0;
      // border-bottom: 2px solid #7367f0;
    }
  }

  .cha {
    margin-right: 4%;
    cursor: pointer;
    position: absolute;
  }
}

.header_status {
  height: 6vh;
  border-bottom: 1px solid @primaryBorderColor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;

  .status_chose {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;

    &:hover {
      color: #7367f0;
    }
  }

  .xiaoxizhongxin {
    font-size: 18px;
    margin-right: 10px;
  }

  >div:last-of-type{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gengduo {
    font-size: 30px;
    cursor: pointer;

    &:hover {
      color: #7367f0;
    }
  }
  .cha {
    font-size: 15px;
    cursor: pointer;
    margin-left: 10px;

    &:hover {
      color: #7367f0;
    }
  }
}

::v-deep .el-dropdown {
  color: @primaryThemeTxtColor;

  &:hover {
    color: #7367f0;
  }
}

.main {
  height: 94%;
}

// drawer
.header_icon {
  width: 61%;
}

::v-deep .el-tabs__header {
  margin: 0 !important;
  height: 100%;
}

::v-deep .el-tabs {
  width: 100%;
  height: 100%;
}

::v-deep .el-tabs__nav-scroll {
  height: 100%;
}

::v-deep .el-tabs__nav {
  width: 100%;
  height: 100%;
  display: flex;
}

::v-deep .el-tabs__item {
  font-size: 18px;
  // font-weight: 600;
  flex: 1;
  text-align: center;
  padding: 0;
  padding-top: 16px;
}

::v-deep .el-tabs__active-bar {
  height: 3px;
}

::v-deep .el-tabs__nav-wrap {
  height: 100%;

  &::after {
    background: none;
    width: 100% !important;
    height: 3px;
  }
}
</style>